<template>
	<div class="container">
		
      <div class="wrap">
        <div class="a cc">
          <van-icon name="arrow-left" color="#000" size="20" @click="link('/')"/>
        </div>
        <div class="b cc"> 
        	<div class="search_wrap">
	        	<!--<div class="left">
	        		<div class="left_box">
		        		<div @click="showSelectPopup">{{selectType}}</div>
		        		<div style="margin-left: 7px;"><img src="../../../../../static/img/lanhu/82.png" alt="" /></div>
	        		</div>
	        		<div class="downSelect" v-if="showDownSelect" >
	        			<img src="../../../../../static/img/lanhu/81.png" alt="" style="height: 70px;"/>
	        			<div class="group">
	        				<div class="item" @click="changeSelect(item)" v-for="(item,index) in selectList" :key="index">{{item.name}}</div>
	        			</div>
	        		</div>
	        	</div>-->
	        	<div class="right">
		        	<div class="input_wrap">
		        	   <input type="text" v-model="value" class="search"  ref="input"  @input="watchInput"  :placeholder="keyword"/>
		        	   <div class="clearWord" @click="clearValue" v-if="value.length>0">
		        	   	<van-icon name="clear" class="clearIcon" color="#999" size="14" />
		        	   </div>
		        	</div>	        		
	        	</div>        		
        	</div>
        </div>
        <div class="c cc" @click="search">搜索</div>
      </div>
      
      <div class="d" v-if="inputNow" @click="showDownSelect=false">
      	<div class="d_1">
      		<div>历史搜索</div>
      		<div @click="clear" v-if="historyList.length>0"><img src="../../../../../static/img/lanhu/79.png" alt="" /></div>
      	</div>
      	<div class="d_2">
      		<span class="d_3" v-for="(item,index) in historyList" :key="index" @click="linkList(item.historyKeyword)">{{item.historyKeyword}}</span>
      	</div>
      </div>
      
      <!--// inputNow为false时显示查询列表-->
      <div class="e" v-if="!inputNow">
      	 <div class="e_item" v-for="(item,index) in goodsList" :key="index" @click="changeKeyword(item)">
      	 	{{item}}
      	 </div>
      </div>
      
      <confirm ref="confirm" @queryConfirm="queryConfirm" title="确定清空历史记录?"></confirm>
	</div>
</template>


<script>
	import confirm from '_c/confirm.vue'
	import {getFun} from '@/api/publicFun.js'	 
    let publicFun=getFun()
	export default {
		components: {
		    confirm
		},			
		name: 'SearchIndex',
		data() {
           return {
           	 userId:'', // 记录当前用户ID
           	 showDownSelect:false,  // 记录是否显示下拉选择框
           	 selectList:[{name:'宝贝',type:'0'},{name:'用户',type:'1'}], // 搜索类目列表
             inputNow:true,
             selectType:'宝贝',  // 记录当前搜索类型
             url1:this.$api+'/marketorderservice/api/v1/market/searchGoodsListLimit', // 关键字匹配前十条商品记录
             url4:this.$api+'/marketorderservice/api/v1/market/goods/deleteSearchHistoryByUserId/', // 根据用户id删除历史搜索记录
             url3:this.$api+'/marketorderservice/api/v1/market/selectSearchHistoryList', //  查询商品/用户历史记录
             url2:this.$api+'/marketorderservice/api/v1/market/goods/getHistoryHotWord/', // 根据类型获取热词
             url5:this.$api+'/marketorderservice/api/v1/market/insertSearchHistoryByKeyWord',  // 添加历史记录
             historyListParams:{        // 历史记录参数
                "type": 0,
                "userId":''
             },
             historyList:[], // 记录历史搜索列表
             goodsList:[],  // 记录搜索出来的商品列表
             keyword:'',    // 记录搜索框的值
             value:'',      // 记录搜索框placeholder
           }
		},
//		watch: {
//		    value(newValue,oldValue) {
//		       if(!this.value){
//		       	 this.inputNow=true
//		       }else{
//		       	 this.inputNow=false
//		       }
//		       if(this.historyListParams.type=='0'){
//		       	 this.getGoodsList(newValue)
//		       }	       
//		    }
//		}, 
		methods: {
			clearValue(){
				this.inputNow=true
				this.value=''
			},
			// 输入的时候监听
			watchInput(res){
				// 不显示查询列表
				if(!this.value){
				  this.inputNow=true
				}
				// 显示查询列表
				else{
				  this.inputNow=false
				  this.getGoodsList(this.value)
				}
			},
//			showSelectPopup(){
//				this.showDownSelect=!this.showDownSelect
//			},
			// 显示清除历史记录的弹框
			clear(){
				this.$refs.confirm.showWin()
			},
			// 确认清除 历史记录
			queryConfirm(){		
			   let that=this
               this.$Axios2.Get(this.url4+this.userId+'/'+this.historyListParams.type).then(function(result) {
               	  that.$toast('操作成功')
               	  that.historyList=[]
               })				
			},
			// 改变关键字
			changeKeyword(str){
				this.value=str
				this.inputNow=true
			},
			// 选择搜索类型
//			changeSelect(item){
//				if(item.type==1){											
//		       	   this.goodsList=[]	
//		       	   this.inputNow=true
//		       	   this.keyword=''
//				}
//				this.selectType=item.name	
//				this.historyListParams.type=item.type
//				let that=this	
//	            this.$Axios2.Post(that.url3,this.historyListParams).then(function(result) {
//	               that.historyList=result.data
//	               that.showDownSelect=false
//	            })			
//			},
			// 历史记录列表
			getSearchHistoryList(){
			   let that=this	
               this.$Axios2.Post(that.url3,this.historyListParams).then(function(result) {
               	 that.historyList=result.data
               })				
			},
			// 通过点击历史记录跳转
			linkList(item){
	        	let params={
				  "searchTxt":item,
				  "type": this.historyListParams.type,
				  "userId": this.userId	        		
	        	}	
	        	let that=this
                this.$Axios2.Post(this.url5,params).then(function(result) {
	                let arg='[{"keyword":"'+item+'"}]' 	
	                that.link('/market/goods/searchList',arg)    
                })		        	
	        	return false	        	
			},
			// 通过搜索搜索跳转
	        search(){
	        	let keyword=''
	        	if(!this.value){
	        		keyword=this.keyword
	        	}else{
	        		keyword=this.value
	        	}
	        	let params={
				  "searchTxt": keyword,
				  "type": this.historyListParams.type,
				  "userId": this.userId	        		
	        	}
	        	let that=this
                this.$Axios2.Post(this.url5,params).then(function(result) {
	                let arg='[{"keyword":"'+keyword+'"}]' 	
	                that.link('/market/goods/searchList',arg)   
                })		        	
	        	return false
	        },
	        // 获取商品列表
	        getGoodsList(str){
	        	let params={
	        	  "searchTxt": str,
	        	  "type":this.historyListParams.type
	        	}
	            let that=this	
                this.$Axios2.Post(that.url1,params).then(function(result) {
                  that.goodsList=result.data                  
                })	        	
	        },
	        // 初始化热搜词
	        getHistoryHotWord(type){
	        	let that=this
                this.$Axios2.Get(this.url2+type).then(function(result) {
                   if(result.data.searchTxt){
                   	if(that.keyword){
                   		that.value=that.keyword
						that.$nextTick(function(){
							that.$refs.input.focus();
						})	   
				  		that.inputNow=false
				        that.getGoodsList(that.value)	
				        that.keyword=result.data.searchTxt
                   	}else{
                   	    that.keyword=result.data.searchTxt
                   	}
                   
                   }else{
                   	that.keyword='请输入搜索关键词'
                   }                   
                })		        	
	        }
		},
		mixins:[publicFun],//混入
		mounted() {
		   this.userId=this.$router.currentRoute.query.userId;			          
		   this.keyword=this.$router.currentRoute.query.keyword;		   
           this.historyListParams.userId=this.$router.currentRoute.query.userId;
           this.getSearchHistoryList()
           this.getHistoryHotWord(0)
		}
	}
</script>

<style scoped="" lang="scss">
	
*{box-sizing: border-box;}
.container{position: absolute;left: 0;top: 0;background: #f8f8f8;min-height: 100%;width: 100%;}
.search_wrap{height: 30px;background: #f0f0f0;width: 100%;display: flex;
   .left{position:relative;padding: 8px 0px 8px 12px;
      .left_box{display: flex;align-items: center;justify-content: center;border-right:1px dashed #E5E5E5;padding-right: 5px;}
      img{width: 7px;display: block;}
      .downSelect{position: absolute;left: 0;top: 100%;
         img{width: 58px;}
         .group{position: absolute;left: 0;top: 0;height: 100%;width: 100%;color: #fff;padding-top: 10px;
            .item{padding: 6px;text-align: center;border-bottom: 1px solid #fff;}
            .item:nth-last-child(1){border-bottom: none;}
         }
      }
   }
   .right{flex: 1;}
}	
	
.cc{display: flex;justify-content: center;align-items: center;}
.wrap{height: 46px;display: flex;}
.a{width: 50px;}
.b{flex: 1;}
.c{width: 50px;font-size: 15px;}
form{width: 100%}
form *{box-sizing: border-box;}


.input_wrap{height: 30px;width: 100%;background:#f0f0f0;position: relative;}
.search{border:none;width: 90%;height: 30px;background:#f0f0f0;
padding-left: 10px;
}
.clearWord{position: absolute;right: 10px;top: 8px;}


.d{padding: 10px 15px;}
.d_1{color: #999;font-size: 14px;display: flex;justify-content: space-between;
  img{width: 17px;height: 17px;}
}
.d_2{margin-top: 20px;}
.d_3{background: #eee;padding: 6px 15px;border-radius: 12px;
margin-right: 10px;margin-bottom: 6px;display: inline-block;}
.d_3.active{color: #f4685d;}


.e{padding: 0px 10px 0;}
.e_item{padding: 10px 0;border-bottom:1px solid #eee;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;}
</style>